<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>发布图书</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色主色调
                        secondary: '#f97316', // 橙色辅助色
                        book: '#10b981', // 图书模块绿色
                        neutral: {
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-book/50 focus:border-book;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-6">
            <a href="<%= request.getContextPath() %>/cjj/admin_dashboard.jsp" class="text-primary font-medium flex items-center">
                <i class="fa fa-tachometer mr-2"></i> 管理后台
            </a>
            <a href="<%= request.getContextPath() %>/cjj/admin_dashboard.jsp" class="text-neutral-700 hover:text-primary transition-colors">
                <i class="fa fa-home mr-1"></i> 首页
            </a>
            <div class="relative group" id="movieMenu">
                <a href="#" class="text-neutral-700 hover:text-primary transition-colors flex items-center">
                    <i class="fa fa-film mr-1"></i> 电影管理 <i class="fa fa-chevron-down ml-1 text-xs"></i>
                </a>
                <div id="movieDropdown" class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
                    <a href="<%= request.getContextPath() %>/cjj/publish_movie.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-primary hover:text-white">发布电影</a>
                    <a href="<%= request.getContextPath() %>/cjj/manage_movies.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-primary hover:text-white">管理电影</a>
                </div>
            </div>
            <div class="relative group" id="bookMenu">
                <a href="#" class="text-primary border-b-2 border-book pb-0.5 font-medium flex items-center">
                    <i class="fa fa-book mr-1"></i> 图书管理 <i class="fa fa-chevron-down ml-1 text-xs"></i>
                </a>
                <div id="bookDropdown" class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
                    <a href="<%= request.getContextPath() %>/cjj/publish_book.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-book hover:text-white">发布图书</a>
                    <a href="<%= request.getContextPath() %>/cjj/manage_books.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-book hover:text-white">管理图书</a>
                </div>
            </div>
            <a href="<%= request.getContextPath() %>/cjj/manage_admins.jsp" class="text-neutral-700 hover:text-primary transition-colors">
                <i class="fa fa-users mr-1"></i> 管理管理员
            </a>
        </div>
        <div class="flex items-center space-x-4">
                <span class="text-neutral-700">
                    <i class="fa fa-user-circle mr-1"></i>
                    <%= (String)request.getSession().getAttribute("adminUsername") %>
                </span>
            <a href="<%= request.getContextPath() %>/admin/logout" class="text-neutral-700 hover:text-red-500 transition-colors">
                <i class="fa fa-sign-out mr-1"></i> 退出
            </a>
        </div>
    </div>
</nav>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="bg-gradient-to-r from-book/10 to-book/5 rounded-xl p-6 mb-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">发布图书</h1>
        <p class="text-neutral-600 mt-2">添加新的图书信息</p>
    </div>

    <!-- 提示框 -->
    <div id="notification" class="fixed top-4 right-4 z-50 max-w-md w-full rounded-lg p-4 shadow-lg transform transition-all duration-300 opacity-0 translate-y-[-20px]">
        <div class="flex items-center">
            <div id="notificationIcon" class="mr-3 text-xl"></div>
            <div class="flex-1">
                <h3 id="notificationTitle" class="font-medium text-sm"></h3>
                <p id="notificationMessage" class="text-sm mt-1"></p>
            </div>
            <button onclick="hideNotification()" class="ml-2 text-gray-400 hover:text-gray-600">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>

    <!-- 图书表单 -->
    <div class="bg-white rounded-xl p-6 card-shadow">
        <form id="bookForm" action="<%= request.getContextPath() %>/admin/publishBook" method="post" enctype="multipart/form-data">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="title" class="block text-sm font-medium text-neutral-700 mb-1">书名 <span class="text-red-500">*</span></label>
                    <input type="text" id="title" name="title" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="author" class="block text-sm font-medium text-neutral-700 mb-1">作者 <span class="text-red-500">*</span></label>
                    <input type="text" id="author" name="author" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="publisher" class="block text-sm font-medium text-neutral-700 mb-1">出版社 <span class="text-red-500">*</span></label>
                    <input type="text" id="publisher" name="publisher" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="publishYear" class="block text-sm font-medium text-neutral-700 mb-1">出版年份 <span class="text-red-500">*</span></label>
                    <input type="number" id="publishYear" name="publishYear" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="pages" class="block text-sm font-medium text-neutral-700 mb-1">页数 <span class="text-red-500">*</span></label>
                    <input type="number" id="pages" name="pages" min="1" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="language" class="block text-sm font-medium text-neutral-700 mb-1">语言 <span class="text-red-500">*</span></label>
                    <input type="text" id="language" name="language" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>

                <div>
                    <label for="translator" class="block text-sm font-medium text-neutral-700 mb-1">译者</label>
                    <input type="text" id="translator" name="translator" class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>
            </div>

            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-neutral-700 mb-1">简介 <span class="text-red-500">*</span></label>
                <textarea id="description" name="description" rows="4" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus"></textarea>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-neutral-700 mb-1">封面图片 <span class="text-red-500">*</span></label>
                <div class="flex items-center justify-center w-full">
                    <label for="coverImage" class="flex flex-col items-center justify-center w-full h-40 border-2 border-neutral-300 border-dashed rounded-lg cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                            <p class="mb-1 text-sm text-neutral-600">点击上传封面图片</p>
                            <p class="text-xs text-neutral-500">支持 JPG, PNG 格式</p>
                        </div>
                        <input id="coverImage" name="coverImage" type="file" accept="image/*" class="hidden" required />
                    </label>
                </div>
                <div id="previewContainer" class="mt-4 hidden">
                    <img id="coverPreview" src="" alt="封面预览" class="max-h-40 rounded-lg">
                </div>
            </div>

            <div class="flex justify-end space-x-4">
                <button type="button" class="px-5 py-2.5 border border-neutral-300 text-neutral-700 rounded-lg hover:bg-neutral-50 transition-colors btn-hover">
                    取消
                </button>
                <button type="submit" class="px-5 py-2.5 bg-book text-white rounded-lg hover:bg-book/90 transition-colors btn-hover">
                    <i class="fa fa-save mr-2"></i> 保存图书
                </button>
            </div>
        </form>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-neutral-600 text-sm mb-4 md:mb-0">
                © 2025 影视图书管理系统. 保留所有权利.
            </div>
            <div class="flex space-x-4">
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle mr-1"></i> 帮助中心
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-envelope mr-1"></i> 联系我们
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-file-text-o mr-1"></i> 使用条款
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Publish Book Page Loaded');

        // 导航栏下拉菜单优化
        const movieMenu = document.getElementById('movieMenu');
        const bookMenu = document.getElementById('bookMenu');
        const movieDropdown = document.getElementById('movieDropdown');
        const bookDropdown = document.getElementById('bookDropdown');
        let hideTimeout;

        // 菜单显示/隐藏逻辑（保持原有）
        movieMenu.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); movieDropdown.classList.remove('hidden'); });
        movieMenu.addEventListener('mouseleave', () => { hideTimeout = setTimeout(() => movieDropdown.classList.add('hidden'), 300); });
        movieDropdown.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
        movieDropdown.addEventListener('mouseleave', () => hideTimeout = setTimeout(() => movieDropdown.classList.add('hidden'), 300));

        bookMenu.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); bookDropdown.classList.remove('hidden'); });
        bookMenu.addEventListener('mouseleave', () => { hideTimeout = setTimeout(() => bookDropdown.classList.add('hidden'), 300); });
        bookDropdown.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
        bookDropdown.addEventListener('mouseleave', () => hideTimeout = setTimeout(() => bookDropdown.classList.add('hidden'), 300));

        // 封面图片预览（保持原有）
        const coverInput = document.getElementById('coverImage');
        const previewContainer = document.getElementById('previewContainer');
        const coverPreview = document.getElementById('coverPreview');
        coverInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = e => { coverPreview.src = e.target.result; previewContainer.classList.remove('hidden'); };
                reader.readAsDataURL(this.files[0]);
            } else {
                previewContainer.classList.add('hidden');
            }
        });

        // 提示框功能
        function showNotification(type, title, message) {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notificationIcon');
            const titleEl = document.getElementById('notificationTitle');
            const msgEl = document.getElementById('notificationMessage');

            // 设置提示框样式
            if (type === 'success') {
                notification.className = 'fixed top-4 right-4 z-50 max-w-md w-full rounded-lg p-4 shadow-lg bg-green-50 border border-green-200 text-green-700';
                icon.className = 'mr-3 text-xl text-green-500 fa fa-check-circle';
            } else {
                notification.className = 'fixed top-4 right-4 z-50 max-w-md w-full rounded-lg p-4 shadow-lg bg-red-50 border border-red-200 text-red-700';
                icon.className = 'mr-3 text-xl text-red-500 fa fa-exclamation-circle';
            }

            titleEl.textContent = title;
            msgEl.textContent = message;
            notification.style.opacity = '1';
            notification.style.transform = 'translateY(0)';

            // 3秒后隐藏
            setTimeout(hideNotification, 3000);
        }

        function hideNotification() {
            const notification = document.getElementById('notification');
            notification.style.opacity = '0';
            notification.style.transform = 'translateY(-20px)';
        }

        // 读取Session中的消息
        const successMsg = '<%= session.getAttribute("successMessage") %>';
        const errorMsg = '<%= session.getAttribute("errorMessage") %>';

        if (successMsg && !successMsg.trim().startsWith("null")) {
            showNotification('success', '操作成功', successMsg);
            <% session.removeAttribute("successMessage"); %>
        } else if (errorMsg && !errorMsg.trim().startsWith("null")) {
            showNotification('error', '操作失败', errorMsg);
            <% session.removeAttribute("errorMessage"); %>
        }

        // 表单提交（优化原有逻辑）
        const bookForm = document.getElementById('bookForm');
        bookForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // 前端验证
            const title = document.getElementById('title').value.trim();
            const author = document.getElementById('author').value.trim();
            const publisher = document.getElementById('publisher').value.trim();
            const publishYear = document.getElementById('publishYear').value.trim();
            const pages = document.getElementById('pages').value.trim();
            const language = document.getElementById('language').value.trim();
            const description = document.getElementById('description').value.trim();

            if (!title || !author || !publisher || !publishYear || !pages || !language || !description) {
                showNotification('error', '输入错误', '所有带*的字段必须填写');
                return;
            }

            this.submit();
        });
    });
</script>
</body>
</html>